<template>
  <div class="detail_center_wrapper">
    <div class="detail_center_inner">
      <div class="select_wrapper">
        <div class="select_inner" style="display: flex;margin: 0 auto;max-width: 600px;">
          <el-select v-model="cmd" placeholder="请选择" style="" @change = "cmdChange">
            <el-option v-for="item in cmds" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <el-select v-model="imp" placeholder="请选择" @change="impChange">
            <el-option v-for="item in imps" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="detail_center_feature_wrapper">
        <el-select v-model="descripts" @remove-tag = "removeTag" @change="featureChange"
          style="margin: 0 auto;"
          multiple filterable allow-create default-first-option
          placeholder="请选择文章标签">
          <el-option v-for="item in sys_features" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="detail_center_addfeature_wrapper" style="padding: 10px;">
        <div class="detail_center_addfeature_inner" style="display: flex;margin: 10px auto;">
          <el-input class="see_input" placeholder="请输入特征" v-model="input_feature" clearable style="margin: 0 10px"></el-input>
          <el-button icon="el-icon-plus" circle @click="addMyFeature"></el-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import {strsutils} from "../../utils/strutils";
  import {postRequest} from "../../utils/api";
  let baseurl = strsutils.baseurl
  export default {
    name: "DetailCenter",
    props: ['word_data'],
    data(){
      return {
        isadd: false,
        input_feature: '',
        descripts: [],
        cmd: '',
        imp: '',
        // features:
        cmds: strsutils.cmds,
        imps: strsutils.imps,
        sys_features: strsutils.sys_features
      }
    },
    mounted() {

    },
    methods: {
      cmdChange(cmd){
        let _this = this
        console.debug('cmdChange'+cmd)
        let param = {id: window.localStorage.getItem('cur_wordid'), cmd: cmd}
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        postRequest(baseurl+'/updateCmd', param).then(function (res) {
          setTimeout(() => {
            loading.close();
          }, 1000);
          console.debug("修改cmd成功")
        }).catch(function (err) {
          setTimeout(() => {
            loading.close();
          }, 1000);
          console.debug("修改cmd失败")
        })
      },
      impChange(imp){
        let _this = this
        console.debug('impChange'+imp)
        let param = {id: window.localStorage.getItem('cur_wordid'), imp: imp}
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        postRequest(baseurl+'/updateImp', param).then(function (res) {
          setTimeout(() => {
            loading.close();
          }, 1000);
          console.debug("修改imp成功")
        }).catch(function (err) {
          setTimeout(() => {
            loading.close();
          }, 1000);
          console.debug("修改imp失败")
        })
      },
      featureChange(features){
        console.debug("feature_select_block_change")
        this.load()
        if (features.length > 0)
        this.postAddFeature(features[features.length-1])
      },
      removeTag(tag){
        let _this = this
        console.debug("remove tag:"+tag)
        this.load()
        let param = {wordid: window.localStorage.getItem('cur_wordid'), descript: tag}
        postRequest(baseurl+'/deleteFeature', param).then(function (res) {
          console.debug('删除特征成功：'+JSON.stringify(res.data))
          _this.$emit("loadWord")
        }).catch(function (err) {
          console.debug("删除特征失败："+err)
        })
      },
      load() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      postAddFeature(input_feature){
        let _this = this
        let param = {wordid: window.localStorage.getItem('cur_wordid'), descript: input_feature}
        postRequest(baseurl+'/addFeature', param).then(function (res) {
          console.debug("添加feature成功："+res)
          _this.$emit("loadWord")
          _this.input_feature = ''
        }).catch(function (err) {
          console.debug("添加feature失败："+err)
        })
      },
      addMyFeature(){
        let _this = this
        if (this.input_feature == '')return
        this.load()
        let unique = true
        this.descripts.forEach((value, index)=>{
          // console.debug("for ")
          if (value == this.input_feature){
            unique = false
          }
        })
        if(unique){
          this.postAddFeature(this.input_feature)
        }
      }
    },
    watch: {
      word_data(newv, oldv){
        console.debug("watch:word_data")
        console.debug("newv:"+JSON.stringify(newv.features))
        console.debug("oldv:"+JSON.stringify(oldv.features))
        this.cmd = newv.cmd
        this.imp = newv.imp
        //设置特征
        let features = newv.features
        this.descripts = []
        for(let i = 0;i < features.length;i++){
          this.descripts.push(features[i].descript)
        }
      },
      descripts(newv, oldv){
        console.debug("watch:descript")
        if(oldv.length > newv.length){
          this.isadd = false
        }else this.isadd = true
      }
    }
  }
</script>
<style>
  .detail_center_feature_wrapper .el-select{min-width: 340px;max-width: 600px;}
</style>

<style scoped>
  .select_inner .el-select{margin: 20px;}
</style>
